<template>
    <div class="noticeList">
        <x-header :left-options="{showBack: true,backText:'公告列表'}" class="headerBox"></x-header>
        <!-- 公告为空 -->
        <img v-if="notes.length == 0" src='../assets/images/nullmaterial08.png'  class='emptyBox'/>
        <!-- 公告列表 -->
        <div class="contentBox">
            <div class='noticeList' v-for="(item, index) in notes" :key="index">
                <div class='dataTitle'>{{item.year}}年{{item.month}}月</div>
                <div class='noticeBox' v-for="(noticeList, index2) in item.noticeLists" :key="index2">
                    <div class='notices'>
                        <div class='dateBox'>
                            <div class='dates'>
                                <div class='week' :class="item.month % 3 == 0 ? 'bg_yellow': item.month % 3 == 2? 'bg_green': 'bg_red'">星期{{noticeList.week}}</div>
                                <div class="day">{{noticeList.day}}</div>
                            </div>
                        </div>
                        <div class='noticeText'>
                            <div class='noticeTitle'>{{noticeList.noticeTitle}}</div>
                            <div class='noticeContent'>{{noticeList.noticeContent}}</div>
                        </div>
                    </div>
                    <div class='more'>
                        <img src='../assets/images/unfold01.png'/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { XHeader  } from "vux";
    export default {
        components: {
            XHeader
        },
        data(){
            return{
                notes: [
                    {
                        year: '2018',
                        month: '9',
                        noticeLists: [
                            {
                                week: '五',
                                day: '07',
                                noticeTitle: '传统瑜伽课程停课通知',
                                noticeContent: '传统瑜伽课程听课通知内容传统瑜伽课程听课通知内容'
                            },
                            {
                                week: '四',
                                day: '06',
                                noticeTitle: '传统瑜伽课程停课通知',
                                noticeContent: '传统瑜伽课程听课通知内容传统瑜伽课程听课通知内容'
                            }
                        ]
                    },
                    {
                        year: '2018',
                        month: '8',
                        noticeLists: [
                            {
                                week: '五',
                                day: '07',
                                noticeTitle: '传统瑜伽课程停课通知',
                                noticeContent: '传统瑜伽课程听课通知内容传统瑜伽课程听课通知内容'
                            }
                        ]
                    },
                    {
                        year: '2018',
                        month: '7',
                        noticeLists: [
                            {
                                week: '五',
                                day: '07',
                                noticeTitle: '传统瑜伽课程停课通知',
                                noticeContent: '传统瑜伽课程听课通知内容传统瑜伽课程听课通知内容'
                            },
                            {
                                week: '四',
                                day: '06',
                                noticeTitle: '传统瑜伽课程停课通知',
                                noticeContent: '传统瑜伽课程听课通知内容传统瑜伽课程听课通知内容'
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
.noticeList{
    /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }

    // 列表
    .contentBox{
        .noticeList {
            padding: 30px 30px 0;
            background: #fff;
            border-top: 20px solid #f8f9fa;
            .dataTitle{
                font-size: 26px;
                color: #999;
            }
            .noticeBox {
                display: flex;
                align-items: center;
                padding: 30px 0;
                border-bottom: 1px solid #eee;
                .notices {
                    align-items: center;
                    width: 80%;
                    display: flex;
                    .dateBox {
                        width: 25%;
                        .dates {
                            border: 2px solid #eee;
                            border-radius: 10px;
                            text-align: center;
                            display: inline-block;
                            .week {
                                color: #fff;
                                font-size: 24px;
                                padding: 6px 20px;
                                border-top-left-radius: 10px;
                                border-top-right-radius: 10px;
                            }
                            .bg_yellow {
                                background-color: #D6A547;
                            }
                            .bg_green {
                                background-color: #6CD647;
                            }
                            .bg_red {
                                background-color: #FF663D;
                            }
                            .day{
                                font-size: 36px;
                            }
                        }
                    }
                    .noticeText {
                        width: 75%;
                        .noticeTitle{
                            font-size: 30px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .noticeContent{
                            font-size: 26px;
                            color: #999;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .more {
                    width: 20%;
                    text-align: right;
                    img {
                        width: 16px;
                        height: 26px;
                    }
                }
            }
        }
    }
  
    // 公告为空样式
    .emptyBox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
    }
}

</style>